<template>
  <div class="mainbox">
    <div style="margin-left: 95%">
      <el-button size="large" round color="black" @click="dialogVisible = true">
        +
      </el-button>
    </div>

    <!-- 添加分类弹窗 -->
    <el-dialog v-model="dialogVisible" title="Add Category" width="30%">
      <el-form
        :model="categoryModel"
        :rules="rules"
        label-width="130px"
        style="padding-right: 30px"
      >
        <el-form-item label="CategoryName" prop="name">
          <el-input
            v-model="categoryModel.name"
            minlength="1"
            maxlength="10"
          ></el-input>
        </el-form-item>
        <el-form-item label="CategortId" prop="categoryId">
          <el-input
            v-model="categoryModel.categoryId"
            minlength="1"
            maxlength="15"
          ></el-input>
        </el-form-item>
        <el-form-item label="Description" prop="description">
          <el-input
            v-model="categoryModel.description"
            minlength="1"
            maxlength="55"
          ></el-input>
        </el-form-item>
        <el-form-item label="CategoryImage">
          <el-upload
            class="avatar-uploader"
            :auto-upload="true"
            :show-file-list="false"
            action="/api/images"
            name="file"
            :headers="{ Authorization: tokenStore.token }"
            :on-success="uploadSuccess"
          >
            <img
              v-if="categoryModel.img"
              :src="categoryModel.img"
              class="avatar"
            />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addCategory"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加product弹窗 -->
    <el-dialog v-model="dialogVisible2" :title="title" width="40%">
      <el-form
        :model="productModel"
        :rules="rules"
        label-width="130px"
        style="padding-right: 30px"
      >
        <el-form-item label="ProductName" prop="name">
          <el-input
            v-model="productModel.name"
            minlength="1"
            maxlength="10"
          ></el-input>
        </el-form-item>
        <el-form-item label="ProductId" prop="categoryId">
          <el-input
            v-model="productModel.productId"
            minlength="1"
            maxlength="15"
          ></el-input>
        </el-form-item>
        <el-form-item label="Description" prop="description">
          <el-input
            v-model="productModel.description"
            minlength="1"
            maxlength="55"
          ></el-input>
        </el-form-item>
        <el-form-item label="ProductImage">
          <el-upload
            class="avatar-uploader"
            :auto-upload="true"
            :show-file-list="false"
            action="/api/images"
            name="file"
            :headers="{ Authorization: tokenStore.token }"
            :on-success="uploadSuccess"
          >
            <img
              v-if="productModel.img"
              :src="productModel.img"
              class="avatar"
            />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取消</el-button>
          <el-button type="primary" @click="addProduct"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>

    <el-tabs
      v-model="editableTabsValue"
      type="card"
      class="demo-tabs"
      closable
      @tab-remove="removeTab"
      @click="tabClick"
    >
      <el-tab-pane
        v-for="item in categories"
        :key="item.name"
        :label="item.name"
        :name="item.categoryId"
      >
        <!--大类基本信息展示-->
        <el-card :model="categoryShow" style="max-width: 100%">
        <template #header>{{categoryShow.name}}</template>
        </el-card>
        <el-card class="page-container">
          <el-table :data="products" style="width: 100%">
            <el-table-column label="序号" width="100" type="index">
            </el-table-column>
            <el-table-column label="ProductName" prop="name"></el-table-column>
            <el-table-column
              label="ProductID"
              prop="productId"
            ></el-table-column>
            <el-table-column label="操作" width="100">
              <template #default="{ row }">
                <el-button
                  type="primary"
                  @click="showItemList(row)"
                  :icon="Search"
                  circle
                ></el-button>
                <el-button
                  type="danger"
                  @click="delProduct(row)"
                  :icon="Delete"
                  circle
                />
              </template>
            </el-table-column>
            <template #empty>
              <el-empty description="空空如也" />
            </template>
          </el-table>
        </el-card>
      </el-tab-pane>
    </el-tabs>

    <button
      class="add"
      @click="
        dialogVisible2 = true;
        title = 'Add Product';
      "
    >
      +
    </button>

    <!--item抽屉-->
    <el-drawer v-model="drawer"  size="60%">
      <div>
        <!--展示product信息-->
        <el-card style="max-width: 100%">
            <template #header>{{productShow.name}}</template>
            <div class="common-layout">
            <el-container>
               <el-aside width="20%">
                <img class="Product-image" :src="getAssetImage(img_src)">
               </el-aside>
               <el-main>
                <el-descriptions title="" :column="3" border>
                   <el-descriptions-item label="CategoryID" label-align="right">
      {{productShow.categoryId}}
    </el-descriptions-item>
    <el-descriptions-item label="ProductID" label-align="right" align="center">
      {{productShow.productId}}
    </el-descriptions-item>
    <el-descriptions-item label="Item Quatity" label-align="right" align="center">
      {{productShow.num}}
    </el-descriptions-item>
    <el-descriptions-item label="Description" label-align="right" align="center">
      {{productShow.description}}
    </el-descriptions-item>
    
  </el-descriptions>
               </el-main>
            </el-container>
            </div>
        </el-card>

        <el-card class="page-container">
          <el-table :data="items" style="width: 100%">
            <el-table-column label="序号" width="100" type="index">
            </el-table-column>
            <el-table-column label="ItemID" prop="itemId"></el-table-column>
            <el-table-column
              label="ProductID"
              prop="productId"
            ></el-table-column>
            <el-table-column
              label="ListPrice"
              prop="listPrice"
            ></el-table-column>
            <el-table-column label="操作" width="100">
              <template #default="{ row }">
                <el-button type="primary" @click="editItem(row)" :icon="Edit" circle></el-button>
                <el-button type="danger" @click="delItem(row)" :icon="Delete" circle />
              </template>
            </el-table-column>
            <template #empty>
              <el-empty description="空空如也" />
            </template>
          </el-table>
        </el-card>
      </div>

      <div>
        <!--添加item-->
        <el-button class="inneradd" color="blue" @click="innerDrawer2 = true"
          >+</el-button
        >
        <el-drawer
          v-model="innerDrawer2"
          title="Add Item"
          :append-to-body="true"
          :before-close="handleClose"
          size="50%"
        >
          <!-- 添加item表单 -->
          <el-form :model="itemModel" label-width="100px">
            <el-form-item label="ItemId">
              <el-input
                v-model="itemModel.itemId"
                placeholder="请输入ItemId"
              ></el-input>
            </el-form-item>
            <el-form-item label="ListPrice">
              <el-input
                v-model="itemModel.listPrice"
                placeholder="请输入ListPrice"
              ></el-input>
            </el-form-item>
            <el-form-item label="UnitCost">
              <el-input
                v-model="itemModel.unitCost"
                placeholder="请输入UnitCost"
              ></el-input>
            </el-form-item>
            <el-form-item label="Inventory">
              <el-input
                v-model="itemModel.quantity"
                placeholder="请输入Inventory"
              ></el-input>
            </el-form-item>
            <el-form-item label="Attribute1">
              <el-input
                v-model="itemModel.attribute1"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="Attribute2">
              <el-input
                v-model="itemModel.attribute2"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="Attribute3">
              <el-input
                v-model="itemModel.attribute3"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="Attribute4">
              <el-input
                v-model="itemModel.attribute4"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="Attribute5">
              <el-input
                v-model="itemModel.attribute5"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="SupplierId">
              <el-input
                v-model="itemModel.supplierId"
                placeholder="请输入SupplierId"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addItem">发布</el-button>
              <el-button type="info" @click="innerDrawer2=false">暂存</el-button>
            </el-form-item>
          </el-form>
        </el-drawer>
        <!--修改item-->
        <el-drawer
          v-model="innerDrawer"
          title="Edit Item"
          :append-to-body="true"
          :before-close="handleClose"
          size="50%"
        >
          <!-- 添加item表单 -->
          <el-form :model="itemModel" label-width="100px">
            <el-form-item label="ItemId">
              <el-input
                v-model="itemModel.itemId"
                placeholder="请输入ItemId"
              ></el-input>
            </el-form-item>
            <el-form-item label="ListPrice">
              <el-input
                v-model="itemModel.listPrice"
                placeholder="请输入ListPrice"
              ></el-input>
            </el-form-item>
            <el-form-item label="UnitCost">
              <el-input
                v-model="itemModel.unitCost"
                placeholder="请输入UnitCost"
              ></el-input>
            </el-form-item>
            <el-form-item label="Inventory">
              <el-input
                v-model="itemModel.quantity"
                placeholder="请输入Inventory"
              ></el-input>
            </el-form-item>
            <el-form-item label="Attribute1">
              <el-input
                v-model="itemModel.attribute1"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="Attribute2">
              <el-input
                v-model="itemModel.attribute2"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="Attribute3">
              <el-input
                v-model="itemModel.attribute3"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="Attribute4">
              <el-input
                v-model="itemModel.attribute4"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="Attribute5">
              <el-input
                v-model="itemModel.attribute5"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="SupplierId">
              <el-input
                v-model="itemModel.supplierId"
                placeholder="请输入SupplierId"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="editItemSure">修改</el-button>
              <el-button type="info" @click="innerDrawer=false">暂存</el-button>
            </el-form-item>
          </el-form>
        </el-drawer>


      </div>
    </el-drawer>

    
  </div>
</template>
  
<script lang="ts" setup>
import { ref } from "vue";
import { Edit, Delete, Search } from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
//相关接口
import {
  categoryListService,
  addCategoryService,
  delCategoryService,
  productsListService,
  addProductService,
  delProductService,
  itemListService,
  addItemService,
  delItemService,
  editItemService
} from "@/api/category.js";
import { RefSymbol } from "@vue/reactivity";
import { useTokenStore } from "@/stores/token.js";
import image from "@/utils/image.js";
const tokenStore = useTokenStore();

//图片上传成功的回调函数
const uploadSuccess = (result) => {
  productModel.value.img = result.message;
  console.log(result.message)
};

//弹窗标题控制
const title = ref("");


//控制添加分类弹窗
const dialogVisible = ref(false);
const dialogVisible2 = ref(false);
//添加分类数据模型
const categoryModel = ref({
  categoryId: "",
  name: "",
  description: "",
  img:''
});

const categoryShow = ref({
  categoryId: "",
  name: "",
  description: "",
  img:''
})
//清空模型
const cleanCategory =()=>{
  categoryModel.value = {
  categoryId: "",
  name: "",
  description: "",
  img:''
}
}
const cleanCategoryShow =()=>{
  categoryShow.value = {
  categoryId: "",
  name: "",
  description: "",
  img:''
}
}

//product
const productModel = ref({
  id: null,
  productId: "",
  categoryId: "",
  name: "",
  description: "",
  img:''
});

const productShow = ref({
  id: null,
  productId: "",
  categoryId: "",
  name: "",
  description: "",
  img:'',
  num:null
})

const cleanProductShow =()=>{
  productShow.value = {
    id: null,
  productId: "",
  categoryId: "",
  name: "",
  description: "",
  img:'',
  num:null
}
}

//item
const itemModel = ref({
  itemId: "",
  productId: null,
  listPrice: null,
  unitCost: null,
  supplierId: null,
  status: "",
  attribute1: "",
  attribute2: "",
  attribute3: "",
  attribute4: "",
  attribute5: "",
  quantity: 0,
});
//添加分类表单校验
const rules = {
  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
  categoryId: [{ required: true, message: "请输入ID", trigger: "blur" }],
  productyId: [{ required: true, message: "请输入ID", trigger: "blur" }],
  description: [{ required: false, message: "请输入描述", trigger: "blur" }],
};

//随机生成唯一大类id  已由后端完成
const RandomNumber = () => {
  const currentTimestamp = Date.now(); // 获取当前时间戳
  const randomSeed = (currentTimestamp % (1000000 - 1000)) + 1000; // 生成随机数种子
  const randomNum = Math.floor(Math.random() * randomSeed); // 生成随机数
  return randomNum;
};

//添加分类
//标签渲染

const addCategory = async () => {
  //categoryModel.value.id = RandomNumber();
  let DataObj  ={
    categoryId: categoryModel.value.categoryId,
    name: categoryModel.value.name,
    description: `<img src="${categoryModel.value.img}">${categoryModel.value.description}`.toString()
  }
  let result = await addCategoryService(DataObj);
  const newTabName = ++tabIndex;
  editableTabsValue.value = newTabName.toString();
  ElMessage.success("添加成功");
  cleanCategory();
  //刷新
  categoryList();
  dialogVisible.value = false;
};

//分类数据类型
const categories = ref([
  {
    id: "1",
    categoryId: "defalut1",
    name: "defalut2",
    description: "defalut2",
  },
  {
    id: "2",
    categoryId: "defalut2",
    name: "defalut2",
    description: "defalut2",
  },
]);

//标签页数据
const products = ref([
  {
    id: 0,
    productId: "k-23",
    categoryId: "string",
    name: "string",
    description: "string",
  },
  {
    id: 1,
    productId: "k-22",
    categoryId: "string",
    name: "string",
    description: "string",
  },
]);

//获取所有分类
let tabIndex = 0;
const categoryList = async() => {
  let result = await categoryListService();
  categories.value = result.data.data;
  console.log("tabList:"+categories.value);
  tabIndex = categories.value.length;
};

categoryList();
//标签页
//默认editableTabsValue  categoryId
const editableTabsValue = ref('1');
//当前tab的id
const tabId =ref(categories.value[0].id)

//大类图片展示   该展示已取消

const img_src = ref('./1.jpg');
 
// const getAssetImage = img_src => common.getAssetImage(img_src, import.meta.url);
// 可以省略第二个参数import.meta.url，函数内部会自动获取函数的调用路径。
const getAssetImage = img_src => image.getAssetImage(img_src);
 
// 常规写法
// function getAssetImage(img_src) {
//   return common.getAssetImage(img_src);
// }

//删除分类
const delCategory = (targetName: number): Promise<boolean> => {
  return new Promise((resolve) => {
    // 弹出确认框
    ElMessageBox.confirm("确认删除当前分类?", "Warning", {
      confirmButtonText: "确认",
      cancelButtonText: "我再想想",
      type: "warning",
    })
      .then(async () => {
        let result = await delCategoryService(targetName);
        categoryList();
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        resolve(true); // 操作成功，返回布尔值 true
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "删除已取消",
        });
        resolve(false); // 操作取消，返回布尔值 false
      });
  });
};

//标签删除   
const removeTab = async(targetName: string) => {
  //console.log("removeTab"+targetName);//拿到的为name
  const tabs = categories.value;
  let activeName = editableTabsValue.value;
  //console.log("remove active"+activeName);
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      //console.log("找");
      if (tab.name === targetName) {
        //console.log("找到了" + tab.name + tab.id);
        const id = Number(tab.id);
        const check = delCategory(id);
        if (check) {
          const nextTab = tabs[index + 1] || tabs[index - 1];
          if (nextTab) {
            activeName = nextTab.id;
          }
        } else {
          console.log("取消了");
          return;
        }
      }
    });
  }
  editableTabsValue.value = activeName;
  categories.value = tabs.filter((tab) => tab.name !== targetName);
  categoryList();
};

//对应标签页的products

//查
const productList = async (id) => {
  //categories.value[id].categoryId
  let result = await productsListService(id);
  products.value = result.data.data;
};

const tabClick = () => {
  cleanCategoryShow();
  const targetName = editableTabsValue.value;
  const categoriesArray = categories.value; // 通过访问 value 属性获取到实际的数组数据
  let id = null;
  let str =''
// 遍历数组进行查找
for (let i = 0; i < categoriesArray.length; i++) {
    if (categoriesArray[i].categoryId === targetName) {
        id = categoriesArray[i].id;
        str = categoriesArray[i].description
        categoryShow.value.categoryId = categoriesArray[i].categoryId
        categoryShow.value.name = categoriesArray[i].name
        break; // 找到匹配的对象后退出循环
    }
}
  tabId.value = id;
  
  // 使用正则表达式匹配需要截取的内容
  const urlRegex = /src="([^"]+)"/;
const urlMatch = str.match(urlRegex);
const url = urlMatch ? urlMatch[1] : '';


  // 截取 ">" 符号后的句子部分
  const indexGreaterThan = str.indexOf('>');
  const sentence = indexGreaterThan !== -1 ? (str.substring(indexGreaterThan + 1)) : '';
  
  categoryShow.value.description = sentence;
  categoryShow.value.img = url;
  //img_src.value = categoryShow.value.img
  productList(id);
};

//增加
const addProduct = async () => {
  //将当前tab的cId赋给模型
  productModel.value.categoryId = tabId.value;
  //productModel.value.id = RandomNumber();
  let activeName = editableTabsValue.value;
  let dataObj = {
    id: productModel.value.categoryId,
    requestBody: {
    productId:productModel.value.productId ,
    categoryId: activeName,
    name: productModel.value.name,
    description: `<img src="${productModel.value.img}">${productModel.value.description}`.toString()
    }
  };
  console.log("dataObj"+dataObj)
  console.log(dataObj.id)
  let result = await addProductService(dataObj);
  ElMessage.success("添加成功");
  //刷新
  productList(tabId.value);
  dialogVisible2.value = false;
  productModel.value = {
    id: null,
    productId: "",
    categoryId: "",
    name: "",
    description: "",
    img:''
  };
};

//删除product
const delProduct = (row) => {
  ElMessageBox.confirm("确认删除该Product吗?", "温馨提示", {
    confirmButtonText: "确认",
    cancelButtonText: "我再想想",
    type: "warning",
  })
    .then(async () => {
      //查找当前选中分类的ID
      const temp = categories.value;
      let target = editableTabsValue.value;
      let categoryId = tabId.value
      let DataObj = {
        id1: null,
        id2: null,
      };
      DataObj.id1 = Number(categoryId);
      DataObj.id2 = Number(row.id);
      console.log(DataObj.id2);
      let result = await delProductService(DataObj);
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      productList(categoryId);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除已取消",
      });
    });
};

//item相关
//抽屉控制

const drawer = ref(false);
const innerDrawer = ref(false);
const innerDrawer2 = ref(false)

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("You still have unsaved data, proceed?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
//items

//itemM清空
const itemClean=()=>{
  itemModel.value={
  itemId: "",
  productId: '',
  listPrice: null,
  unitCost: null,
  supplierId: null,
  status: "",
  attribute1: "",
  attribute2: "",
  attribute3: "",
  attribute4: "",
  attribute5: "",
  quantity: 0,
  }
}

//items
const items = ref([
  {
    id: 0,
    itemId: "string",
    productId: "string",
    listPrice: 0,
    unitCost: 0,
    supplierId: 0,
    status: "string",
    attribute1: "string",
    attribute2: "string",
    attribute3: "string",
    attribute4: "string",
    attribute5: "string",
    quantity: 0,
  },
]);

//当前proId
const proId= ref(null);
//当前itemId
const itemId = ref(null)
//获取items
const itemList = async (id) => {
  proId.value = id;
  let result = await itemListService(id);
  items.value = result.data.data;
};

const showItemList = (row) => {
  cleanProductShow();
  let str = '';
  for(let i = 0;i<products.value.length;i++){
    if(row.id===products.value[i].id){
      productShow.value.id = products.value[i].id;
      productShow.value.name = products.value[i].name;
      productShow.value.categoryId = products.value[i].categoryId
      productShow.value.productId = products.value[i].productId
      str = products.value[i].description
      break;
    }
  }
  // 使用正则表达式匹配需要截取的内容
  const urlRegex = /src="([^"]+)"/;
  const urlMatch = str.match(urlRegex);
  const url = urlMatch ? urlMatch[1] : '';


  // 截取 ">" 符号后的句子部分
  const indexGreaterThan = str.indexOf('>');
  const sentence = indexGreaterThan !== -1 ? (str.substring(indexGreaterThan + 1)) : '';
  
  productShow.value.description = sentence;
  productShow.value.img = url;
  img_src.value = productShow.value.img
  itemList(row.id);
  productShow.value.num = items.value.length
  console.log("listId"+row.id)
  drawer.value = true;
};

const addItem=async()=>{
  let id = proId.value;
  itemModel.value.status = "P";
  let DataObj={
    id1:Number(id),
    body:itemModel.value
  }
  let result =await addItemService(DataObj);
  ElMessage.success("添加成功");
  innerDrawer2.value=false;
  itemList(id);
  itemClean();
}

const delItem = (row)=>{

  ElMessageBox.confirm(
    '确认要删除当前item?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '我再想想',
      type: 'warning',
    }
  )
    .then(async() => {
      let DataObj = {
    id1:Number(proId.value),
    id2:Number(row.id)
  }
  let result = await delItemService(DataObj);
  itemList(proId.value);
      ElMessage({
        type: 'success',
        message: '删除已完成',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除已取消',
      })
    })
}



const editItem = (row)=>{
  for(let i = 0;i<items.value.length;i++){
    if(row.id ===items.value[i].id){
      itemId.value = Number(items.value[i].id)
      itemModel.value = items.value[i]
      break;
    }
  }
  innerDrawer.value = true;
}

const editItemSure = async()=>{
  let tempId = proId.value
  let DataObj = {
    id1:Number(tempId),
    id2:itemId.value,
    body:itemModel.value
  }
  let result = await editItemService(DataObj);
  ElMessage.success("修改成功了亲")
  innerDrawer.value = false
  itemClean();
  itemList(proId.value)
}



</script>
  



<style lang="scss">
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs {
  margin-top: -20px;
}

.topadd {
  position: absolute;
  top: 73px;
  right: 40px;
}

.page-container {
  min-height: 100%;
  box-sizing: border-box;
}

.add {
  position: absolute;
  float: left;
  top: 80%;
  right: 3%;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 50px;
  font-weight: 600;
}

.inneradd {
  position: absolute;
  float: left;
  top: 55px;
  right: 30px;
  font-weight: 900;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #060707;
  width: 178px;
  height: 178px;
  text-align: center;
}

:deep(.my-label) {
  background: var(--el-color-success-light-9) !important;
}
:deep(.my-content) {
  background: var(--el-color-danger-light-9);
}

.Product-image{
  max-width: 100%; /* 图片最大宽度为其容器的100% */
  max-height: 100%; /* 图片最大高度为其容器的100% */
  width: auto; /* 图片宽度自适应 */
  height: auto; /* 图片高度自适应 */
}

</style>